<template>
	<view class="content">
		<view class="head-area">
			<img src="../../static/details/back.png" class="back" @tap="handleBack()"></img>
			<img src="../../static/logo.png" class="logo"></img>
		</view>
		<!-- <RobotData top="95" left="30"></RobotData> -->
		<view class="container">
			<view class="content-box">
				<view class="title">嘉宾参会码</view>
				<view class="qr-box" v-if="userData.qrCode">
					<view class="code">
						<img :src="userData.qrCode"></img>
					</view>
					<view class="info">
						姓名：{{userData.name}}
					</view>
					<view class="info">
						嘉宾类型：{{userData.guestType}}
					</view>
					<view class="info">
						票型：{{userData.ticketType}}
					</view>
					<view class="info" >
						座位区域：{{userData.seatNumber}}
					</view>
					<view class="info" >
						晚宴桌号：{{userData.tableNumber}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bqxx">APPLICATIONS ARE HERE</view> -->
		<FootLogo></FootLogo>
	</view>
</template>

<script>
	import FootLogo from '@/components/footLogo/index.vue';
	export default {
		components: {
			FootLogo
		},
		data() {
			return {
				userData: {},
			}
		},
		onLoad(props) {
			if (props.uId) {
				this.getInfo(props.uId)
			}
		},
		methods: {
			getInfo(uId) {
				// 网络请求
				uni.showLoading({
					title: '请求中',
				});
				uni.request({
					url: 'https://flow.btvs.cn/api/basic/guest/' + uId,
					method: 'GET',
					header: {
						Authorization: uni.getStorageSync('token')
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							this.userData = {
								...res.data.data
							}

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							})
							if (res.data.code == 401) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/hwLogin/index'
									})
								}, 1500)
							}
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络开小差了~',
							icon: "error"
						})
					},
				});
			},
			handleBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		background: url('../../static/login_bg.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.head-area {
			padding: 0 60rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 60rpx;
			left: 0;
			z-index: 9;

			.back {
				width: 80rpx;
			}

			.logo {
				width: 240rpx;
			}
		}



		.container {
			padding-top: 200rpx;
			overflow: auto;
			height: 100vh;

			.title {
				font-family: Arial, Helvetica, sans-serif;
				text-align: center;
				font-size: 40rpx;
				font-weight: 600;
				color: #000;
			}

			.content-box {
				padding: 30rpx 60rpx 30rpx;

				img {
					max-width: 100%;
				}

				.qr-box {
					margin-top: 60rpx;
					padding: 60rpx;
					background-color: #fff;
					border: 1px solid skyblue;
					border-radius: 32rpx;
					text-align: center;

					img {
						border: 1px solid skyblue;
						border-radius: 32rpx;
					}

					.info {
						margin-top: 32rpx;
						font-size: 36rpx;
						color: #222222;
					}
				}
			}
		}

		.bqxx {
			width: 100%;
			position: fixed;
			bottom: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
		}
	}
</style>